//  加载layer
let layer = layui.layer;
let form = layui.form;

// todo ========获取文章类别数据 
getArtList();
// 封装函数
function getArtList() {
  axios.get("/my/article/cates").then(({ data }) => {
    console.log(data);
    const newArr = data.data
      .map(
        ({ Id, name, alias }) => `
        <tr>
        <td>${name}</td>
        <td>${alias}</td>
        <td>
          <button type="button" class="layui-btn layui-btn-xs btn_edit"
          data-id="${Id}">编辑</button>
          <button type="button" class="layui-btn layui-btn-xs layui-btn-danger btn_delete"
          data-id="${Id}">删除</button>
        </td>
      </tr>
        `
      )
      .join("");
    $("#tbody").html(newArr);
  });
}

// todo ======= 点击添加分类按钮，显示弹层
let addIndex;
const addFormStr = `<form id="addForm" class="layui-form">
<!-- 第一行 分类名称 -->
<div class="layui-form-item">
  <label class="layui-form-label">分类名称</label>
  <div class="layui-input-block">
    <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
      class="layui-input">
  </div>
</div>
<!-- 第二行 分类别名  -->
<div class="layui-form-item">
  <label class="layui-form-label">分类别名</label>
  <div class="layui-input-block">
    <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
      class="layui-input">
  </div>
</div>
<!-- 第三行 按钮 -->
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  </div>
</div>
</form>`
// 点击添加分类按钮
$("#btnAddCate").on("click", function () {
  // 显示弹出层
  addIndex = layer.open({
    title: "添加文章类别", // 标题
    type: 1, // 基本层类型  1（页面层）
    area: ["500px", "250px"], // 宽度高度
    content: addFormStr, // 内容  加载addFormStr
  });
});

// todo ==================== 确认添加分类 ====================
// 事件委托，form注册事件
$("body").on("submit", "#addForm", function (e) {
  //
  e.preventDefault();
  // 获取到表单数据
  const data = $(this).serialize();
  axios({
    method: "post",
    url: "/my/article/addcates",
    data,
  }).then((res) => {
    console.log(res);
    if (res.data.status !== 0) {
      // 添加类别失败
      return layer.msg(res.data.message);
    }
    // 成功
    layer.msg(res.data.message);
    // 调用，获取文章类别函数
    getArtList();
    // 关闭弹出层
    layer.close(addIndex);
  });
});

// todo ============编辑功能
// 需要事件委托
let editIndex;
// 修改类别的弹出层
let editFormStr = `<form id="editForm" class="layui-form" lay-filter="formTest">
<!-- 第一行 分类Id -->
<div class="layui-form-item layui-hide">
  <label class="layui-form-label">分类Id</label>
  <div class="layui-input-block">
    <input type="text" name="Id" required lay-verify="required" autocomplete="off"
      class="layui-input">
  </div>
</div>
<!-- 第一行 分类名称 -->
<div class="layui-form-item">
  <label class="layui-form-label">分类名称</label>
  <div class="layui-input-block">
    <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
      class="layui-input">
  </div>
</div>
<!-- 第二行 分类别名  -->
<div class="layui-form-item">
  <label class="layui-form-label">分类别名</label>
  <div class="layui-input-block">
    <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
      class="layui-input">
  </div>
</div>
<!-- 第三行 按钮 -->
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
  </div>
</div>
</form>`

$("body").on("click", ".btn_edit", function () {
  // 编辑弹出层
  editIndex = layer.open({
    title: "修改文章类别", // 标题
    type: 1, // 基本层类型  1（页面层）
    area: ["500px", "250px"], // 宽度高度
    content: editFormStr, // 内容  加载 editFormStr
  });
  // 获取id
  const Id = $(this).attr("data-id");
  console.log(Id);
  //
  axios({
    method: "get",
    url: "/my/article/cates/" + Id,
  }).then(({ data }) => {
    console.log(data);
    form.val("formTest", data.data);
  });
});

//  点击确认修改 内容 发送 axios 请求 渲染   需添加id 结构 获取到id
$('body').on('submit', '#editForm', function (e) {
  e.preventDefault()
  const data = $(this).serialize()
  axios.post('/my/article/updatecate', data).then(({ data }) => {
    if (data.status !== 0) {
      return layer.msg(data.message)
    }
    layer.close(editIndex)
    layer.msg(data.message)
    //  获取所有数据
    getArtList();

  })
})

// todo =====删除
// 
$("#tbody").on("click", '.btn_delete', function () {
  // 获取id
  const id = $(this).attr("data-id");

  layer.confirm('确定删除吗?', { icon: 3, title: '提示' }, function (index) {
    // do something

    // axios 的请求
    axios.get("/my/article/deletecate/" + id).then(({ data }) => {
      if (data.status !== 0) {
        // 删除失败
        return layer.msg("删除文章分类失败");
      }
      // 关闭弹出层
      layer.close(index);
      // 删除成功
      layer.msg("删除文章分类成功");
      //  获取所有数据
      getArtList();
    });
  });
})